﻿<!DOCTYPE html>
<html>
<head>
    <title>CGI</title>
</head>
<body>
    <h1>Our Page</h1>
    <!--01 old way to handling event, but still valid with modern browser as well
        markup within the body of html-->
    <input id="submit1" type="button" value="Submit" />
    <script>
        //grabing the button
        var button = document.getElementById('submit1');
        //button = dom elemnt
        //and then domElement.addEventListener
        //first agument = name of the event we want to handle
        //second argument = handler function
        //this the best way to handle event for modern browsers
        button.addEventListener('click', function () {
            console.log('Button Clicked');
        });
    </script>
    <!--02
    multipler handler on the same DOM element button -->
    <!--<input id="submit1" type="button" value="Submit" />
    <script>
        var button = document.getElementById('submit1');
        button.addEventListener('click', function () {
            console.log('Button Clicked');
        });
        button.addEventListener('click', function () {
            console.log('Another Listener Function');
        });
    </script>-->
    <!--03
    better way by using external function in place of handler function -->
    <!--<input id="submit1" type="button" value="Submit" />
    <script>
        var button = document.getElementById('submit1');
        var submitHandler = function formSubmitHandler() {
            console.log('inform Submit Handler()');
        };
        button.addEventListener('click', submitHandler);
    </script>-->
    <!--04
    add and remove event listeners-->
    <!--<input id="submit1" type="button" value="Submit" />
    <script>
        var button = document.getElementById('submit1');
        var submitHandler = function formSubmitHandler() {
            console.log('inform Submit Handler()');
        };
        button.addEventListener('click', submitHandler);
        button.removeEventListener('click', submitHandler);
    </script>-->
</body>
</html>